<script lang="ts" setup>
import { reactive, onMounted, ref, shallowRef } from 'vue'
import BaseInfo from './comps/BaseInfo.vue'
import UpdatePwd from './comps/UpdatePwd.vue'
import NavTab from '../../../../components/normal/nav/NavTab.vue'
import NavContent from '../../../../components/normal/nav/NavContent.vue'


const state = reactive({
  isLoading: false,
  viewSource: [
      { label: '基本信息', value: 'base' },
    { label: '修改密码', value: 'pwd' }
  ],
  currentView: 'base'

})

const loadingHandler = (val:boolean) => {
  state.isLoading = val
}

</script>

<template>
  <v-pop-win title="个人中心"
             width="600"
             :loading="state.isLoading"
             :show-footer="false">
    <div class="user-center-win">
      <nav-tab v-model="state.currentView"
               :source="state.viewSource"
               auto>
        <nav-content :select="state.currentView==='base'" auto>
          <base-info @loading="loadingHandler" />
        </nav-content>
        <nav-content :select="state.currentView==='pwd'" auto>
          <update-pwd @loading="loadingHandler" />
        </nav-content>
      </nav-tab>
    </div>
  </v-pop-win>
</template>

<style scoped lang="scss">

.user-center-win{
  @include ver-group();
  width:100%;
  height: 580px;
}

</style>
